<template>
  <div class="common-layout linear-gradient">
    <el-container>
      <el-header class="header-container">
        <div class="headerTitle">查询条件</div>
        <div class="header-content">
          <el-form :model="headerSearchForm" label-width="auto" class="header-search-form">
            <el-form-item label="工艺规则库变量名">
              <el-input v-model="headerSearchForm.productionLine" placeholder="请输入变量名" />
            </el-form-item>
            <el-form-item label="变量描述">
              <el-input v-model="headerSearchForm.variableDescription" placeholder="请输入变量描述" />
            </el-form-item>
          </el-form>
          <div class="header-buttons">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button type="primary" @click="handleReset">重置</el-button>
            <el-button type="primary" @click="handleAdd">添加</el-button>
          </div>
        </div>
      </el-header>
      <el-main>
        <div class="table-container-main">
          <el-table
            :data="tableData"
            :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
          >
            <el-table-column prop="serialNumber" label="序号" fixed="left">
              <template #default="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="productionLine" label="产线" />
            <el-table-column prop="areaCode" label="区域代码" />
            <el-table-column prop="deviceCode" label="设备代码" />
            <el-table-column prop="variableName" label="工艺规则库变量名" />
            <el-table-column prop="variableDescription" label="变量描述" />
            <el-table-column prop="threshold" label="阈值" />
            <el-table-column prop="thresholdUnit" label="阈值单位" />
            <el-table-column prop="alarmLevel" label="报警等级" />
            <el-table-column prop="monitorCycle" label="监控周期" />
            <el-table-column prop="dataType" label="数据类型" />
            <el-table-column label="操作" fixed="right" width="240">
              <template #default="scope">
                <el-button type="warning" @click="handleEdit(scope.row)">修改</el-button>
                <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-main>
    </el-container>
  </div>

  <el-dialog v-model="dialogVisible" :title="dialogTitle" :before-close="handleClose" ref="dialogRef" @closed="cancel">
    <el-form :model="dialogForm" label-width="auto">
      <el-form-item label="产线">
        <el-input v-model="dialogForm.productionLine" placeholder="请输入产线" />
      </el-form-item>
      <el-form-item label="区域代码">
        <el-input v-model="dialogForm.areaCode" placeholder="请输入区域代码" />
      </el-form-item>
      <el-form-item label="设备代码">
        <el-input v-model="dialogForm.deviceCode" placeholder="请输入设备代码" />
      </el-form-item>
      <el-form-item label="工艺规则库变量名">
        <el-input v-model="dialogForm.variableName" placeholder="请输入变量名" />
      </el-form-item>
      <el-form-item label="变量描述">
        <el-input v-model="dialogForm.variableDescription" placeholder="请输入变量描述" />
      </el-form-item>
      <el-form-item label="阈值">
        <el-input v-model="dialogForm.threshold" placeholder="请输入触发标记" />
      </el-form-item>
      <el-form-item label="阈值单位">
        <el-input v-model="dialogForm.thresholdUnit" placeholder="请输入触发标记" />
      </el-form-item>
      <el-form-item label="报警等级">
        <el-select v-model="alarmLevel" placeholder="报警等级" clearable>
          <el-option v-for="item in alarmLevelOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="监控周期">
        <el-input v-model="dialogForm.monitorCycle" placeholder="请输入监控周期" />
      </el-form-item>
      <el-form-item label="数据类型">
        <el-select v-model="dataType" placeholder="数据类型" clearable>
          <el-option v-for="item in dataTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="dialogFormSubmit"> 提交 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts">
  import { ref, reactive, computed, onMounted, onUnmounted, nextTick, defineComponent } from 'vue';
  import { ElMessage } from 'element-plus';
  import './steelCoilServiceModelCommonStyle.less';

  interface SearchForm {
    productionLine: string;
    variableDescription: string;
    variableName: string;
  }

  export default defineComponent({
    name: 'DataDictionary',
    setup() {
      // 表单数据
      const headerSearchForm = reactive<SearchForm>({
        productionLine: '',
        variableDescription: '',
        variableName: '',
      });

      const alarmLevelOptions = ref([
        { label: '一级', value: '一级' },
        { label: '二级', value: '二级' },
        { label: '三级', value: '三级' },
      ]);

      const dataTypeOptions = ref([
        { label: '数值型', value: '数值型' },
        { label: '字符型', value: '字符型' },
        { label: '布尔型', value: '布尔型' },
        { label: '枚举型', value: '枚举型' },
      ]);

      // 表格数据
      const tableData = ref([
        {
          productionLine: '生产线A',
          areaCode: 'A01',
          deviceCode: 'D001',
          variableName: 'temperature_threshold',
          variableDescription: '温度阈值变量',
          threshold: '50',
          thresholdUnit: '℃',
          alarmLevel: alarmLevelOptions.value[0].value,
          triggerMarkUnit: '小时',
          dataType: dataTypeOptions.value[0].value,
          monitorCycle: '10分钟',
        },
        {
          productionLine: '生产线A',
          areaCode: 'A01',
          deviceCode: 'D002',
          variableName: 'pressure_limit',
          variableDescription: '压力限制变量',
          threshold: '100',
          thresholdUnit: 'Pa',
          alarmLevel: '二级',
          triggerMarkUnit: '分钟',
          dataType: '数值型',
        },
        {
          productionLine: '生产线A',
          areaCode: 'A02',
          deviceCode: 'D003',
          variableName: 'speed_control',
          variableDescription: '速度控制变量',
          threshold: '60',
          thresholdUnit: 'm/s',
          alarmLevel: '三级',
          triggerMarkUnit: '秒',
          dataType: '数值型',
        },
        {
          productionLine: '生产线B',
          areaCode: 'B01',
          deviceCode: 'D004',
          variableName: 'humidity_condition',
          variableDescription: '湿度条件变量',
          threshold: '70',
          thresholdUnit: '%',
          alarmLevel: '一级',
          triggerMarkUnit: '小时',
          dataType: '数值型',
        },
        {
          productionLine: '生产线B',
          areaCode: 'B01',
          deviceCode: 'D005',
          variableName: 'light_intensity',
          variableDescription: '光照强度变量',
          threshold: '500',
          thresholdUnit: 'lux',
          alarmLevel: '二级',
          triggerMarkUnit: '分钟',
          dataType: '数值型',
        },
        {
          productionLine: '生产线B',
          areaCode: 'B02',
          deviceCode: 'D006',
          variableName: 'rotation_speed',
          variableDescription: '旋转速度变量',
          threshold: '3000',
          thresholdUnit: 'r/min',
          alarmLevel: '三级',
          triggerMarkUnit: '秒',
          dataType: '数值型',
        },
        {
          productionLine: '生产线C',
          areaCode: 'C01',
          deviceCode: 'D007',
          variableName: 'voltage_safety',
          variableDescription: '电压安全变量',
          threshold: '220',
          thresholdUnit: 'V',
          alarmLevel: '一级',
          triggerMarkUnit: '小时',
          dataType: '数值型',
        },
        {
          productionLine: '生产线C',
          areaCode: 'C01',
          deviceCode: 'D008',
          variableName: 'current_limit',
          variableDescription: '电流限制变量',
          threshold: '10',
          thresholdUnit: 'A',
          alarmLevel: '二级',
          triggerMarkUnit: '分钟',
          dataType: '数值型',
        },
        {
          productionLine: '生产线C',
          areaCode: 'C02',
          deviceCode: 'D009',
          variableName: 'noise_level',
          variableDescription: '噪音水平变量',
          threshold: '80',
          thresholdUnit: 'dB',
          alarmLevel: '三级',
          triggerMarkUnit: '秒',
          dataType: '数值型',
        },
        {
          productionLine: '生产线D',
          areaCode: 'D01',
          deviceCode: 'D010',
          variableName: 'weight_tolerance',
          variableDescription: '重量公差变量',
          threshold: '5',
          thresholdUnit: 'kg',
          alarmLevel: '一级',
          triggerMarkUnit: '小时',
          dataType: '数值型',
        },
        {
          productionLine: '生产线D',
          areaCode: 'D01',
          deviceCode: 'D011',
          variableName: 'length_limit',
          variableDescription: '长度限制变量',
          threshold: '100',
          thresholdUnit: 'mm',
          alarmLevel: '二级',
          triggerMarkUnit: '分钟',
          dataType: '数值型',
        },
        {
          productionLine: '生产线D',
          areaCode: 'D02',
          deviceCode: 'D012',
          variableName: 'angle_precision',
          variableDescription: '角度精度变量',
          threshold: '0.5',
          thresholdUnit: '°',
          alarmLevel: '三级',
          triggerMarkUnit: '秒',
          dataType: '数值型',
        },
        {
          productionLine: '生产线E',
          areaCode: 'E01',
          deviceCode: 'D013',
          variableName: 'flow_rate',
          variableDescription: '流量变量',
          threshold: '100',
          thresholdUnit: 'm³/h',
          alarmLevel: '一级',
          triggerMarkUnit: '小时',
          dataType: '数值型',
        },
        {
          productionLine: '生产线E',
          areaCode: 'E01',
          deviceCode: 'D014',
          variableName: 'pressure_difference',
          variableDescription: '压力差变量',
          threshold: '20',
          thresholdUnit: 'kPa',
          alarmLevel: '二级',
          triggerMarkUnit: '分钟',
          dataType: '数值型',
        },
        {
          productionLine: '生产线E',
          areaCode: 'E02',
          deviceCode: 'D015',
          variableName: 'temperature_difference',
          variableDescription: '温差变量',
          threshold: '10',
          thresholdUnit: '℃',
          alarmLevel: '三级',
          triggerMarkUnit: '秒',
          dataType: '数值型',
        },
        {
          productionLine: '生产线F',
          areaCode: 'F01',
          deviceCode: 'D016',
          variableName: 'humidity_difference',
          variableDescription: '湿度差变量',
          threshold: '5',
          thresholdUnit: '%',
          alarmLevel: '一级',
          triggerMarkUnit: '小时',
          dataType: '数值型',
        },
        {
          productionLine: '生产线F',
          areaCode: 'F01',
          deviceCode: 'D017',
          variableName: 'speed_difference',
          variableDescription: '速度差变量',
          threshold: '10',
          thresholdUnit: 'm/s',
          alarmLevel: '二级',
          triggerMarkUnit: '分钟',
          dataType: '数值型',
        },
        {
          productionLine: '生产线F',
          areaCode: 'F02',
          deviceCode: 'D018',
          variableName: 'density_threshold',
          variableDescription: '密度阈值变量',
          threshold: '1.2',
          thresholdUnit: 'g/cm³',
          alarmLevel: '三级',
          triggerMarkUnit: '秒',
          dataType: '数值型',
        },
        {
          productionLine: '生产线G',
          areaCode: 'G01',
          deviceCode: 'D019',
          variableName: 'viscosity_limit',
          variableDescription: '粘度限制变量',
          threshold: '50',
          thresholdUnit: 'mPa·s',
          alarmLevel: '一级',
          triggerMarkUnit: '小时',
          dataType: '数值型',
        },
        {
          productionLine: '生产线G',
          areaCode: 'G01',
          deviceCode: 'D020',
          variableName: 'pH_value',
          variableDescription: 'pH值变量',
          threshold: '7',
          thresholdUnit: '',
          alarmLevel: '二级',
          triggerMarkUnit: '分钟',
          dataType: '数值型',
        },
        {
          productionLine: '生产线G',
          areaCode: 'G02',
          deviceCode: 'D021',
          variableName: 'color_difference',
          variableDescription: '色差变量',
          threshold: '5',
          thresholdUnit: '',
          alarmLevel: '三级',
          triggerMarkUnit: '秒',
          dataType: dataTypeOptions.value[0].value,
        },
      ]);

      const dataSourceType = ref('');
      let dialogVisible = ref(false);
      let dialogTitle = ref('');
      const dialogForm = reactive({
        productionLine: '',
        areaCode: '',
        deviceCode: '',
        variableName: '',
        variableDescription: '',
        threshold: '',
        thresholdUnit: '',
        alarmLevel: '',
        monitorCycle: '',
        dataType: '',
      });
      const dialogRef = ref();
      const dataType = ref('');
      const alarmLevel = ref('');

      // 分页数据
      const pagination = reactive({
        currentPage: 1,
        pageSize: 10,
        total: tableData.value.length,
      });

      // 窗口大小变化处理
      const handleResize = () => {
        nextTick(() => {
          // 这里可以添加表格自适应高度的逻辑
        });
      };

      // 获取表格数据
      const fetchTableData = async () => {
        try {
          // 这里添加获取数据的API调用
          // const res = await api.getTableData({ ...headerSearchForm, ...pagination });
          // tableData.value = res.data;
          // pagination.total = res.total;
        } catch (error) {
          ElMessage.error('获取数据失败');
        }
      };

      // 查询方法
      const handleSearch = () => {
        pagination.currentPage = 1;
        fetchTableData();
      };

      // 重置方法
      const handleReset = () => {
        (Object.keys(headerSearchForm) as Array<keyof SearchForm>).forEach((key) => {
          headerSearchForm[key] = '';
        });
        handleSearch();
      };
      // 添加方法
      const handleAdd = () => {
        // 这里添加新增逻辑
        console.log('添加');
        dialogVisible.value = true;
        dialogTitle.value = '新增';
        Object.assign(dialogForm, {
          productionLine: '',
          areaCode: '',
          deviceCode: '',
          variableName: '',
          variableDescription: '',
          threshold: '',
          thresholdUnit: '',
          alarmLevel: '',
          monitorCycle: '',
          dataType: '',
        });
      };

      // 编辑方法
      const handleEdit = (row: any) => {
        // 这里添加编辑逻辑
        dialogVisible.value = true;
        dialogTitle.value = '修改';
        Object.assign(dialogForm, { ...row });
        alarmLevel.value = { ...row.alarmLevel };
        dataType.value = { ...row.dataType };
      };

      const cancel = () => {
        dialogVisible.value = false;
      };

      const dialogFormSubmit = () => {
        // 这里添加表单提交逻辑
        console.log('表单提交', dialogForm);
        dialogVisible.value = false;
        fetchTableData();
      };

      const handleClose = (done: () => void) => {
        ElMessageBox.confirm('Are you sure to close this dialog?')
          .then(() => {
            done();
          })
          .catch(() => {
            // catch error
          });
      };

      // 删除方法
      const handleDelete = (row: any) => {
        // 这里添加删除逻辑
        console.log('删除', row);
      };

      // 分页大小变化
      const handleSizeChange = (val: number) => {
        pagination.pageSize = val;
        fetchTableData();
      };

      // 页码变化
      const handleCurrentChange = (val: number) => {
        pagination.currentPage = val;
        fetchTableData();
      };

      // 生命周期钩子
      onMounted(() => {
        // fetchTableData();
        window.addEventListener('resize', handleResize);
      });

      onUnmounted(() => {
        window.removeEventListener('resize', handleResize);
      });

      return {
        headerSearchForm,
        tableData,
        pagination,
        handleSearch,
        handleReset,
        handleAdd,
        handleEdit,
        handleDelete,
        handleSizeChange,
        handleCurrentChange,
        dataSourceType,
        dataTypeOptions,
        dialogVisible,
        dialogTitle,
        dialogForm,
        dialogFormSubmit,
        cancel,
        handleClose,
        alarmLevelOptions,
        dataType,
        alarmLevel,
      };
    },
  });
</script>
